<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" type="text/css" href="js/ztree/zTreeStyle.css">
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
<script type="text/javascript">
	//树对象
	var ztreeObj;
	
	var newCount = 1;
	//当前编辑的节点
	var currNode = null;
	//ztree全局设置
	var setting = {
			edit:{
				enable:true,
				removeTitle:'删除',
				renameTitle:'修改',
				showRemoveBtn:function(treeId,treeNode){
					if(treeNode.pId==0){
						return false;
					}else if(!treeNode.isParent){
						return true;
					}else{
						var length = treeNode.children.lengt;
						if(length==0){
							return true;
						}else{
							return false;
						}
					}
				},
				showRenameBtn:function(treeId,treeNode){
					return !treeNode.pId==0;
				}
			},
			view:{
				addHoverDom:function(treeId,treeNode){
					var sObj = $("#" + treeNode.tId + "_span");
					if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
					var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
						+ "' title='添加' onfocus='this.blur();'></span>";
					sObj.after(addStr);
					var btn = $("#addBtn_"+treeNode.tId);
					if (btn) btn.bind("click", function(){
						var zTree = $.fn.zTree.getZTreeObj("treemenu");
						zTree.addNodes(treeNode, {id:(maxid + newCount), pId:treeNode.id, name:"新节点" + (maxid + newCount++)});
						return false;
					});
				},
				removeHoverDom:function(treeId,treeNode){
					$("#addBtn_"+treeNode.tId).unbind().remove();
				},
				selectedMulti:false
			},
			data: {
				simpleData : { // 简单数据 
					enable : true
				}
			},
			callback:{
				beforeEditName:function(treeId, treeNode){
					console.info(treeNode);
					
					currNode = treeNode;
					
					$("#newNodeForm")[0].reset();
					$("#pId").val('');
					$("#id").val('');
					$("#pId").val(treeNode.pId);
					$("#menuName").val(treeNode.name);
					
					if(/^新节点/.test(treeNode.name)){
						//新添加的
					}else{
						//对以存在(数据库)的进行修改
						if(treeNode.id){
							$("#id").val(treeNode.id);
						}
						if(treeNode.page){
							$("#page").val(treeNode.page);
						}
						if(treeNode.description){
							$("#description").val(treeNode.description);
						}
						if(treeNode.priority){
							$("#priority").val(treeNode.priority);
						}
					}
					
					//返回false就不直接编辑名称
					return false;
				},
				beforeRemove:function(treeId, treeNode){
					//返回false就不执行删除
					if(/^新节点/.test(treeNode.name)){
						return true;
					}else{
						//同步ajax
						$.ajax({
							type:"POST",
							url:"./menu_delete.action",
							dataType:"json",
							async:false,
							data:treeNode,
							success:function(data){
								if(data.status){
									// ajax delete  返回成功 return true 否则return  false
									return true;
								}else{
									alert(data.msg);
									return false;
								}
							}
						});
					}
				},
				onAsyncSuccess:function(event, treeId, treeNode, msg){
					console.info(11);
				}
			}
	};
	
	//树根
	var zNodes = [
	             {id:1,pId:0,name:'',icon:'js/ztree/img/diy/1_open.png',open:true}
	             ];
	
	var maxid = 0;//用于添加新节点node的时候 给新节点设置id递增
	$(function(){
		// 基本功能菜单加载
		$.post("./menu_list2.action",function(data){
			$.each(data,function(i,n){
				/* if(n.id==1){
					data[i]=zNodes[0];
				} */
				if(n.pId==0){
					n.pId=1;
				}
				
				//记录最大的id
				if(n.id>maxid){
					maxid=n.id;
				}
			})
			//console.info(data);
			data.unshift(zNodes[0]);
			//console.info(data);
			
			ztreeObj = $.fn.zTree.init($("#treemenu"), setting, data);
		},"json");
		//ztreeObj = $.fn.zTree.init($("#treemenu"), setting, zNodes);
		
		$("#submit").click(function(){
			//ajax ... save form
			if(/^新节点/.test($("#menuName").val())){
				return false;
			}
			var url = "./menu_save2.action";
			if($("#pId").val()==1){
				$("#pId").val(null);
			}
			var data = $("#newNodeForm").serialize();
			var parentNode = currNode.getParentNode();
			$.post(url,data,function(data){
				//通过返回的状态  如果成功就执行(移除旧节点，生成返回数据json的新节点)   否则就不执行
				if(data.status){
					ztreeObj.removeNode(currNode);
					ztreeObj.addNodes(parentNode,data.data);
				}else{
					alert(data.msg);
				}
			});
		});
	});

</script>
</head>
<body>
	<div style="width: 48%;height: 800px;float: left;border-right: 1px solid blue;">
		<ul id="treemenu" class="ztree"></ul>
	</div>
	<div style="width: 48%;height: 800px;float: left;margin-left: 2em;">
		<form action="" id="newNodeForm">
			<input type="hidden" name="parentMenu.id" id="pId">
			<input type="hidden" name="id" id="id">
			<table>
				<tr>
					<td><label>菜单名称</label></td>
					<td><input type="text" size="50" id="menuName" name="name"></td>
				</tr>
				<tr>
					<td><label>访问路径</label></td>
					<td><input type="text" size="50" name="page" id="page"></td>
				</tr>
				<tr>
					<td><label>排序号</label></td>
					<td><input type="number" name="priority" id="priority" style="width: 380px"></td>
				</tr>
				<tr>
					<td><label>描述</label></td>
					<td>
						<textarea rows="10" cols="52" name="description" id="description"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="提交" id="submit">
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>